<!-- 选择场地-提交订单 -->
<script setup>
	import {
		reactive,
		computed,
		ref,
		nextTick
	} from 'vue'
	import {
		onLoad,
		onShow,
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		placeOrdApi,
		payOrdApi,
		placeAptApi
	} from '@/api/venue.js'
	// 引入卡券弹窗组件
	import SelectCoupon from '@/components/SelectCoupon.vue';
	// 引入场馆弹窗组件
	import SelectVenue from '@/components/SelectVenue.vue';
	// 引入选择预约时间弹窗组件
	import SelectTime from '@/components/SelectTime.vue';


	// 全局页面数据
	const data = reactive({
		barHeight: 0,
		navHeight: 0,
		couponInfo: {}
	})

	const venueDetails = ref({
		shopName: ''
	})
	const addr = ref()
	const itemCurrent = ref({
		time: ''
	})

	const dd = ref()
	const w = ref()
	const ordId = ref()
	const ordCode = ref()


	const coachValue = ref({
		spId: '',
		spName: '',
		price: 0
	})
	// 约场地的教练数据
	onShow((coachItem) => {
		uni.$on('coachItem', (coachItem) => {
			coachValue.value = coachItem.value
			console.log("接收到的 coachValue.value:", coachValue.value);
			// console.log("coachItem", coachItem);
		});
	})



	// 选择教练陪练
	const viewAllClick = () => {
		uni.navigateTo({
			url: `/subPackage/venue/chooseCoach?type=${venueDetails.type}&dd=${dd.value}&itemCurrent=${itemCurrent.value}`
		})
	}





	// 立即支付
	const payNowClick = async () => {
		console.log('ordCode: ', ordCode);
		console.log('coachValue.value=====', coachValue.value);
		let {
			data
		} = await placeAptApi({
			spId: venueDetails.value.spId,
			serviceTime: venueDetails.value.serviceTime.replaceAll(/[^0-9]/g, ""),
			price: venueDetails.value.price,
			quantity: 1,
			shopId: venueList.value.shopId,
			aptTime: `${appointmentTime.value}:00`,
			transWay: 0,
			actualAmount: venueDetails.value.price + coachValue.value.price - couponList.value.disAmount,
			isPublic: venueList.value.isPublish,
			// 22是微信支付,23是模拟支付
			payType: "23",

			// 先做使用一张优惠券
			couponList: couponList.value.cpnInsId === '' ? undefined : [couponList.value.cpnInsId],


		})


		// const data = await getPlaceOrd()
		console.log('data============', data);
		payOrdApi({
			ordId: data.ordId,
			payType: '23',

		}).then(res => {
			console.log('res:=== ', res);
			uni.showToast({
				title: '支付成功',
				icon: 'none',
				success: function(res) {
					uni.switchTab({
						url: '/pages/home/index'
					})
				}
			})
		})
	}




	// 点击选择优惠券确认按钮触发
	const couponList = ref({
		cpnInsId: '',
		disAmount: 0
	})

	const confirm = (option) => {
		selectCouponShow.value = false
		couponList.value = option
		console.log('option==', option);
	}


	const venueList = ref({
		shopName: '',
		shopId: '',
	})

	const selectVenueConfirm = (option) => {
		selectVenueShow.value = false
		venueList.value = option
		console.log('option:====== ', option);
	}


	// 场地数据
	const selectCouponRow = ref()

	// 点击优惠券
	const selectCouponShow = ref(false)
	const goSelectCoupon = () => {
		selectCouponShow.value = true
		selectCouponRow.value = venueDetails.value

		console.log(selectCouponRow.value, 'selectCouponRow.value');
	}
	// 点击选择场馆
	const selectVenueShow = ref(false)
	const goSelectVenue = () => {
		selectVenueShow.value = true
		console.log(selectVenueShow.value, 'goSelectVenue: =======');
	}
	// 点击选择预约时间
	const selectTimeShow = ref(false)
	const goSelectTime = () => {
		selectTimeShow.value = true
		console.log(selectTimeShow.value, 'selectTimeShow: =============');
	}


	// 点击场馆弹窗确认按钮



	// 选择预约时间弹窗
	const appointmentTime = ref()
	const selectTimeConfirm = (dd, itemCurrent) => {
		console.log('接收传值');
		console.log('dd: ==', dd);
		console.log('itemCurrent: ', itemCurrent);
		appointmentTime.value = `${dd} ${itemCurrent}`
		selectTimeShow.value = false
	}



	const fieldFlag = ref(false)
	onLoad((option) => {
		venueDetails.value = JSON.parse(option.venueDetails)

		console.log('venueDetails.value: ', venueDetails.value);
		const pages = getCurrentPages(); // 获取页面栈
		if (pages.length > 1) {
			const prevPage = pages[pages.length - 2]; // 获取上一个页面
			const route = prevPage.route; // 获取上一个页面的路由信息
			console.log('上一个页面的路由信息======:', route);
			// 根据route做相应的逻辑处理
			if (route === 'subPackage/venue/field') {
				fieldFlag.value = true
				addr.value = option.addr
				itemCurrent.value = JSON.parse(option.itemCurrent)
				dd.value = option.dd
				w.value = option.w
				ordId.value = option.ordId
				ordCode.value = option.ordCode
				console.log('option', option);
				console.log('itemCurrent.value===: ', itemCurrent.value);
			}
		}

		//获取手机系统的信息（在这主要是获取状态栏和胶囊的高度）
		let {
			statusBarHeight
		} = uni.getSystemInfoSync()
		data.barHeight = statusBarHeight
		let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		data.navHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2
	})


	// 须知
	const nodes =
		`预定完成后请于开课前一天内，致电场馆确认您的预约：8618917209587 1、请不要迟到，迟到恕不能入场； 2、请备好水瓶、毛巾(必要，现场可付费租借)； 3、请让教练了解您的受伤或健康状况； 4、请在开课前15分钟前到达现场，并在开课前15分钟签到。 此为训练营课程，非F45常规课，强度较低，适合新手或久坐不运动、大体重减脂的人群。`
</script>

<template>
	<view class="venue-submit-page">
		<!-- 内容 -->
		<view class="content">
			<!-- 约场馆的场馆信息 -->
			<view class="info-box" v-if="fieldFlag">
				<view class="pic">
					<u-image :src="venueDetails.prodMainPic" width="132rpx" height="152rpx" mode="aspectFill" />
				</view>
				<view class="info">
					<view class="name">{{venueDetails.shopName}}</view>
					<view class="time">{{dd}}（周{{w}}）{{itemCurrent.time}}</view>
					<view class="address">
						<image src="/static/images/icons/icon_shop.png" style="width: 24rpx; height: 24rpx;"
							mode="widthFit" />
						<text class="up-line-1">{{addr}}</text>
					</view>
				</view>
			</view>


			<!-- 约教练的教练信息 -->
			<view class="info-box" v-if="!fieldFlag">

				<view class="info-coach" style="overflow: hidden;">
					<image style="height: 150rpx; width: 150rpx;" :src="venueDetails.spAvatar" mode="scaleToFill" />
				</view>
				<view class="info">
					<view class="name">{{venueDetails.spName}}</view>
					<view class="address">
						<text>服务时长：</text>
						<text style="margin-left: 18rpx;">60分钟/次</text>
					</view>
				</view>
			</view>

			<!-- 承诺 -->
			<view class="promise-box">
				<view class="item">
					<image src="/static/images/icons/promise_icon1.png" mode="scaleToFill" />
					<text>不满意包退</text>
				</view>
				<view class="item">
					<image src="/static/images/icons/promise_icon2.png" mode="scaleToFill" />
					<text>过期退</text>
				</view>
				<view class="item">
					<image src="/static/images/icons/promise_icon3.png" mode="scaleToFill" />
					<text>按次约</text>
				</view>
				<view class="item">
					<image src="/static/images/icons/promise_icon4.png" mode="scaleToFill" />
					<text>超优惠</text>
				</view>
			</view>
			<!-- 约场地的选择教练 -->
			<view class="coach-box" v-if="fieldFlag">
				<view class="title">
					<text>选择教练陪练</text>
				</view>
				<view class="more" @click="viewAllClick">
					<text>查看全部</text>
					<u-icon name="arrow-right" color="#838385"></u-icon>
				</view>
			</view>
			<!-- 约教练的选择场馆 -->


			<view class="order-detail-box" v-if="!fieldFlag">
				<view class="order-detail-item">
					<view class="label" style="font-weight: 600;font-size: 32rpx;color: #303133;">课程类型:</view>
					<view class="value">
						独享1对1
					</view>
				</view>
				<view class="order-detail-item" @click="goSelectVenue">
					<view class="label" style="font-weight: 600;font-size: 32rpx;color: #303133;">选择场馆:</view>
					<view class="value">
						<text v-if="!venueList.shopName">请选择场馆</text>
						<text>{{venueList.shopName}}</text>
						<!-- <text v-else>暂无可用</text> -->
						<u-icon name="arrow-right" color="#333333" size="12"></u-icon>
					</view>
				</view>
				<view class="order-detail-item" @click="goSelectTime">
					<view class="label" style="font-weight: 600;font-size: 32rpx;color: #303133;">选择时间:</view>
					<view class="value">
						<text v-if="!appointmentTime">请选择预约时间</text>
						<text>{{appointmentTime}}</text>
						<!-- <text v-else>暂无可用</text> -->
						<u-icon name="arrow-right" color="#333333" size="12"></u-icon>
					</view>
				</view>



				<!-- 选择场馆弹窗 -->
				<SelectVenue :show="selectVenueShow" @close="selectVenueShow = false" @confirm="selectVenueConfirm" />
				<!-- 选择预约时间弹窗 -->
				<SelectTime :show="selectTimeShow" @close="selectTimeShow = false" @confirm="selectTimeConfirm" />
			</view>


			<!-- 订单详情 -->
			<view class="order-detail-box">
				<view class="head">订单详情</view>

				<!-- 教练金额 -->
				<view class="order-detail-item">
					<view class="label">教练金额:</view>
					<view class="value">
						￥ {{ venueDetails.price }}
					</view>
				</view>

				<!-- 氧气补贴 -->
				<view class="order-detail-item">
					<view class="label">氧气补贴:</view>
					<view class="value" style="color: #3f9742">
						-¥{{ `0` }}
					</view>
				</view>
				<!-- 优惠券 -->
				<!-- <view class="order-detail-item" @click="goSelectCoupon">
					<view class="label">优惠券:</view>
					<view class="value">
						<text style="color: #3f9742;">-¥{{ couponList.disAmount }}</text>
						
						<u-icon name="arrow-right" color="#333333" size="12"></u-icon>
					</view>
				</view> -->


				<!-- 优惠券弹窗 -->
				<!-- 			<SelectCoupon :show="selectCouponShow" :selectCouponRow="selectCouponRow"
					@close="selectCouponShow = false" @confirm="confirm" /> -->
				<!-- 线 -->
				<view class="line"></view>
				<!-- 实际支付 -->
				<view class="order-detail-item">
					<view class="label">实际支付</view>
					<view class="value payAmount">
						￥{{ `${venueDetails.price-couponList.disAmount}` }}
					</view>
				</view>
			</view>
			<!-- 预约必看 -->
			<view class="notice-box">
				<view class="head">预约必看</view>
				<view class="cnt">
					<up-icon name="info-circle-fill" color="#838385" size="16"></up-icon>
					<rich-text :nodes="nodes"></rich-text>
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="btns-box">
			<view class="price">
				<view class="num">
					<text>￥{{ `${venueDetails.price+coachValue.price-couponList.disAmount}` }}</text>
				</view>
			</view>
			<view class="btn" @click="payNowClick">
				<text>立即支付</text>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.venue-submit-page {
		padding-bottom: 216rpx;
		background-color: #F6F6F6;
		min-height: 100vh;



		// 内容
		& .content {
			padding: 20rpx 32rpx;

			// 场馆预约样式
			& .info-box {
				display: flex;
				align-items: center;
				padding: 28rpx 32rpx;
				background: #FFFFFF;
				border-radius: 24rpx;

				// 约教练的教练样式
				.info-coach {
					width: 144rpx;
					height: 144rpx;
					border-radius: 50%;
					border: 4rpx solid #fff;
					box-shadow: 0px 5px 7px rgba(0, 0, 0, 0.15);
				}

				// 约场馆的场馆样式
				& .pic {
					margin-right: 24rpx;
					border-radius: 12rpx;
					overflow: hidden;
				}

				& .info {
					margin-left: 16rpx;
					width: 460rpx;

					& .name {
						font-weight: 500;
						font-size: 32rpx;
						color: #303133;
					}

					& .time {
						margin-top: 24rpx;
						font-weight: 500;
						font-size: 28rpx;
						color: #303133;
					}

					& .address {
						margin-top: 10rpx;
						display: flex;
						align-items: center;
						font-weight: 400;
						font-size: 28rpx;
						color: #838385;

						& text {
							margin-left: 2rpx;
						}
					}
				}
			}

			// 承诺
			& .promise-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;
				padding: 28rpx 4rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;

				& .item {
					position: relative;
					display: flex;
					align-items: center;
					padding: 0 28rpx;

					&:not(:last-child)::after {
						content: '';
						position: absolute;
						right: 0;
						top: 0;
						bottom: 0;
						margin: auto;
						width: 0rpx;
						height: 32rpx;
						border: 2rpx solid #D9D9D9;
						opacity: 0.4;
					}

					& image {
						width: 32rpx;
						height: 32rpx;
						font-size: 0;
					}

					& text {
						margin-left: 4rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #303133;
						line-height: 23rpx;
					}
				}
			}

			// 教练
			& .coach-box {

				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;
				padding: 30rpx 32rpx;
				background: #FFFFFF;
				border-radius: 24rpx;

				& .title {
					font-weight: 600;
					font-size: 32rpx;
					color: #303133;
				}

				& .more {
					display: flex;
					align-items: center;
					font-weight: 400;
					font-size: 24rpx;
					color: #838385;

					& text {
						margin-right: 4rpx;
					}
				}
			}

			// 订单详情
			& .order-detail-box {
				margin-top: 20rpx;
				padding: 28rpx 32rpx;
				background: #FFFFFF;
				border-radius: 24rpx;

				& .head {
					font-weight: 600;
					font-size: 32rpx;
					color: #303133;
				}

				& .line {
					margin-top: 24rpx;
					border: 2rpx solid;
					opacity: 0.5;
					border-image: linear-gradient(270deg, rgba(217, 217, 217, 0), rgba(217, 217, 217, 1), rgba(217, 217, 217, 0)) 2 2;
				}

				& .order-detail-item {
					margin-top: 24rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					& .label {
						font-weight: 400;
						font-size: 28rpx;
						color: #838385;
					}

					& .value {
						display: flex;
						align-items: center;
						font-weight: 500;
						font-size: 28rpx;
						color: #303133;

						&.payAmount {
							font-weight: 500;
							font-size: 40rpx;
							background: linear-gradient(180deg, #303133 0%, #21FF2B 100%);
							background-clip: text;
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}

						&::v-deep .u-icon {
							margin-left: 10rpx;
							font-weight: 700rpx;
						}
					}
				}
			}

			// 预约必看
			& .notice-box {
				margin-top: 20rpx;
				padding: 28rpx 32rpx;
				background: #FFFFFF;
				border-radius: 24rpx;

				& .head {
					font-weight: 600;
					font-size: 32rpx;
					color: #303133;
				}

				& .cnt {
					margin-top: 24rpx;
					display: flex;
					align-items: flex-start;

					& rich-text {
						margin-left: 14rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #838385;
						line-height: 40rpx;
					}
				}
			}
		}

		// 按钮
		& .btns-box {
			position: fixed;
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			bottom: 0;
			left: 0;
			z-index: 9;
			padding: 0 36rpx;
			padding-top: 12rpx;
			width: 100vw;
			height: 172rpx;
			background: #FFFFFF;
			border: 1rpx solid #E9E9EB;

			& .price {
				margin-top: 16rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #838385;
				line-height: 23rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;

				& .num {
					display: inline-block;
					margin-right: 6rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 48rpx;
					line-height: 56rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					background: linear-gradient(180deg, #303133 0%, #21FF2B 100%);
					background-clip: text;
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}

			& .btn {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 88rpx;
				width: 428rpx;
				color: #FFFFFF;
				background: #303133;
				font-weight: 500;
				font-size: 32rpx;
				line-height: 38rpx;
				text-align: center;
				border-radius: 112rpx;

			}
		}
	}
</style>